<template>
  <div>
    <div class="title">
      <span>{{title}}</span>
      <i class="el-icon-warning-outline"></i>
    </div>
    <div class="content">{{count}}</div>
    <div class="chart">
      <slot name="charts"></slot>
    </div>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Detail',
  props: ['title', 'count']
}
</script>

<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  color: #d9d9d9;
}
.content {
  font-size: 30px;
  padding: 10px 0;
}
.chart {
  height: 50px;
}
.footer {
  border-top: 1px solid #eee;
  padding-top: 10px;
}
</style>